<!--  -->
<template>
  <div class="hot_count_home">
    <div class="hot_name">
      <span class="line"></span>
      <h2 class="hot_posts"> 高校毕业生专区</h2>
      <span class="line"></span>
    </div>

    <el-row :gutter="20">
      <el-col :span="6" v-for="(graduatesResumeList, index) in graduatesResume" :key="index" v-show="index < num">
        <transition name="hehe">
          <div class="company_position_info" @click="jobToDetais(graduatesResumeList, index)">
            <a :href="url+'/company/#/universityZone'" target="_blank">
              <el-card class="box-card">
                <div class="titleInfo">
                  <div
                    :class="{ 'portraitBox': graduatesResumeList.sex == 1, 'portraitGirl': graduatesResumeList.sex != 1 }">
                    <el-avatar :size="40" :src="graduatesResumeList.photo" v-show="graduatesResumeList.photo">
                    </el-avatar>
                  </div>
                  <span class="name">{{graduatesResumeList.name || '暂无'}}</span>
                  <span class="six">{{graduatesResumeList.sexText || '暂无'}}</span>
                </div>
                <div class="contentInfo">
                  <p>毕业院校：{{graduatesResumeList.schoolName || '暂无'}}</p>
                  <p>所学专业：{{graduatesResumeList.major || '暂无'}}</p>
                  <p>毕业时间：{{graduatesResumeList.endTime.slice(0, 11) || '暂无'}}</p>
                </div>
              </el-card>
            </a>
          </div>
        </transition>
      </el-col>
      <!-- <el-col :span="8">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple"></div>
      </el-col> -->
    </el-row>
    <!-- <div class="company_positionSoldier"> -->

    <!-- </div> -->
    <div class="seeMore">
      <el-link type="primary" v-if="true" :underline="false" :href="url+'/company/#/universityZone'" target="_blank">
        企业登录查看更多
      </el-link>
    </div>
  </div>
</template>

<script>
import { graduatesResume } from '../../../api/homeIndex';
export default {
  components: {},
  data () {
    return {
      // 数据
      graduatesResume: [],
      url: process.env.VUE_APP_URL,
      // 默认数量
      num: 4,
      isTrue: true
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 请求军人专区接口
    getGraduatesResume () {
      graduatesResume().then(res => {
        if (res.success) {
          console.log(res.data)
          this.graduatesResume = res.data.records
        }
      })
    },
    // 跳转
    manyJob () {
      // this.num = 100
      // this.isTrue = true
    },
    // jobToDetais (obj, index) {
    //   // this.$message.error('功能未作，企业端页面未写')
    //   const { href } = this.$router.resolve({
    //     path: process.env.VUE_APP_URL + '/company/#/universityZone'
    //   });
    //   window.open(href, '_blank');
    // }
  },
  created () {
    // 请求军人专区接口
    this.getGraduatesResume()
  },
  mounted () {

  },
  beforeCreate () { },
  beforeMount () { },
  beforeUpdate () { },
  updated () { },
  beforeDestroy () { },
  destroyed () { },
  activated () { },
}
</script>
<style scoped>
.hot_name {
    width: 100%;
    height: 93px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.hot_name span {
    width: 50px;
    height: 0px;
    border: 1px solid rgba(204, 204, 204, 1);
    opacity: 1;
}
.hot_posts {
    text-align: center;
    margin: 0 30px;
}
.company_position_info {
    display: flex;
    align-items: center;
    padding: 0 10px;
    margin-top: 15px;
    justify-content: space-between;
    background: #fff;
    cursor: pointer;
}
.titleInfo {
    padding: 0px 0px 14px 0px;
    display: flex;
    align-items: center;
    flex-direction: row;
    border-bottom: 1px solid rgba(232, 232, 232, 1);
}
.titleInfo .name {
    margin: 0 14px;
}
.contentInfo p {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 28px;
    color: rgba(85, 85, 85, 1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portraitBox {
    width: 40px;
    height: 40px;
    background: url('../../../assets/img/logoM.png') no-repeat;
    background-size: 100% 100%;
}
.portraitGirl {
    width: 40px;
    height: 40px;
    background: url('../../../assets/img/logog.png') no-repeat;
    background-size: 100% 100%;
}
.hehe-enter,
.hehe-leave-to {
    opacity: 0;
}
.hehe-enter-to,
.hehe-leave {
    opacity: 1;
}
.hehe-enter-active,
.hehe-leave-active {
    transition: all 3s;
}
.seeMore {
    width: 340px;
    height: 40px;
    margin: 30px auto;
    border: 1px solid rgba(24, 147, 252, 1);
    opacity: 1;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(24, 147, 252, 1);
    cursor: pointer;
}

.seeMore .el-link.el-link--primary {
    width: 100%;
}
.hot_count_home {
    width: 1200px;
    margin: 0 auto;
}
</style>